<template>
	<view>
		<view class="component text-center">
			<view class="component-title">{{Collection_SerialNumber}}</view>
			<view class="component-code">
				<Barcode cid="code128" ref="barcode" format="code128" onval :val="Collection_SerialNumber" :load-make="true" :opations="barOpations" />
			</view>
			<view class="component-qr">
				<Qrcode ref="qrcode" onval :val="Collection_SerialNumber" :size="300" :load-make="true" :show-loading="false" />
			</view>
		</view>
	</view>
</template>

<script>
	import Qrcode from '@/components/code/qrcode/qrcode.vue'
	import Barcode from '@/components/code/barcode/barcode.vue'
	export default {
		components: {
			Qrcode, //二维码
			Barcode //一维码
		},
		data() {
			return {
				barOpations: {
					// format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
					width: 2, //设置条之间的宽度
					height: 120, //高度
					displayValue: true, //是否在条形码下方显示文字
					// text: "FB19A1650-100S",//覆盖显示的文本
					textAlign: "left", //设置文本的水平对齐方式
					textPosition: "bottom", //设置文本的垂直位置
					textMargin: 0, //设置条形码和文本之间的间距
					// fontSize: 24,//设置文本的大小
					// fontColor: "#0000ef",//设置文本的颜色
					// lineColor: "#0000ef",//设置条形码的颜色
					background: "#FFFFFF", //设置条形码的背景色
					margin: 0, //设置条形码周围的空白边距
					marginTop: 10, //设置条形码周围的上边距
					// marginBottom: 20,//设置条形码周围的下边距
					// marginLeft: 10,//设置条形码周围的左边距
					marginRight: 10,//设置条形码周围的右边距
				},
				Collection_SerialNumber: 'M00000000000001'
			}
		},
		onLoad(e) {
			this.Collection_SerialNumber = e.Collection_SerialNumber
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.component {
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		flex: 1;
		margin: 64rpx;
		padding: 64rpx 32rpx;

		&-title {
			max-height: 112rpx;
			font-size: 40rpx;
			font-weight: 600;
			line-height: 56rpx;
			overflow: hidden;
		}

		&-code {
			height: 150rpx;
			margin: 32rpx 32rpx 0;
		}

		&-qr {
			height: 250rpx;
			margin-top: 36rpx;
		}
		.coupon-no-view {
			margin: 0 18rpx;
			height: 76rpx;
			border-radius: 8rpx;
			border: 2px solid #F5F5F5;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-top: 36rpx;

			text {
				font-size: 24rpx;
				font-weight: 400;

				&:first-child {
					color: #999999;
				}
			}

			.coupon-no {
				flex: 1;
				text-align: left;
			}
		}
	}
</style>